/*
 * @Author: xiaosihan 
 * @Date: 2024-12-02 01:12:49 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-12-02 07:56:15
 */

import editorStore from "@/editorComponent/editorStore";
import fontManage from "@/myFabric/fontManage";
import { Checkbox, Select, Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import nameNumStore from "../nameNumStore";
import styles from "./step2.module.less";
import Step2Color from "./Step2Color";
import { NameNumSide } from "#/type";
import { first } from "lodash";

const { Option } = Select;

interface Iprops {
  children?: ReactNode
}

// 步骤2
export default function Step2(props: Iprops) {

  const dom = useRef<HTMLDivElement | null>(null);
  const [addName, setAddName] = useState(editorStore.addName);
  const [nameSide, setNameSide] = useState(editorStore.nameSide);
  const [nameFontFamily, setNameFontFamily] = useState(editorStore.nameFontFamily);

  //商品的面
  const [goodsSides, setGoodsSides] = useState<Array<string>>([]);

  const [addNum, setAddNum] = useState(editorStore.addNum);
  const [numSide, setNumSide] = useState(editorStore.numSide);
  const [numFontFamily, setNumFontFamily] = useState(editorStore.numFontFamily);

  useEffect(() => {

  }, []);

  useEffect(() => autorun(() => {
    setAddName(editorStore.addName);
    setNameSide(editorStore.nameSide);
    setAddNum(editorStore.addNum);
    setNumSide(editorStore.numSide);
    setNameFontFamily(editorStore.nameFontFamily);
    setNumFontFamily(editorStore.numFontFamily);
  }, { delay: 10 }), []);

  useEffect(() => autorun(() => {
    const { goodsData } = editorStore;
    if (goodsData) {
      const goodsSides = goodsData.component.map(c => c.key);
      setGoodsSides(goodsSides);
    }

  }, { delay: 10 }), []);

  return (
    <div ref={dom} className={styles.step2} >

      <div
        className={styles.title}
        onClick={() => {
          nameNumStore.setStep(1);
        }}
      >设置名字加号码的规则</div>

      <div className={styles.listItem} >
        <span className={styles.lable} >第一步:</span>
        <span className={styles.input} >
          <Checkbox
            checked={addName}
            onChange={e => {
              editorStore.setAddName(Boolean(e.target.checked), editorStore.nameSide);
            }}
          >添加姓名</Checkbox>
        </span>
        <span className={styles.input} >
          <Checkbox
            checked={addNum}
            onChange={e => {
              editorStore.setAddNum(Boolean(e.target.checked), editorStore.numSide);
            }}
          >添加号码</Checkbox>
        </span>
      </div>

      <div className={styles.listItem} >
        <span className={styles.lable} >正反面:</span>
        <span className={styles.input} >
          <Select
            disabled={!addName}
            value={nameSide}
            style={{ width: 100 }}
            onChange={async (side) => {
              editorStore.setActiveComponent(side);
              await new Promise(resolve => setTimeout(resolve, 100));
              await editorStore.setAddName(editorStore.addName, side);
            }}
          >
            {
              [
                { side: "front", sideName: "前片" },
                { side: "back", sideName: "后片" },
                { side: "left_front", sideName: "左前片" },
                { side: "right_front", sideName: "右前片" },
                { side: "left_back", sideName: "左后片" },
                { side: "right_back", sideName: "右后片" },
              ].filter(s => goodsSides.includes(s.side)).map((s, i) => {
                return (
                  <Option key={i} value={s.side}>{s.sideName}</Option>
                );
              })
            }
          </Select>
        </span>
        <span className={styles.input} >
          <Select
            disabled={!addNum}
            value={numSide}
            style={{ width: 100 }}
            onChange={async (side) => {
              editorStore.setActiveComponent(side);
              await new Promise(resolve => setTimeout(resolve, 100));
              await editorStore.setAddNum(editorStore.addNum, side);
            }}
          >
            {
              [
                { side: "front", sideName: "前片" },
                { side: "back", sideName: "后片" },
                { side: "left_front", sideName: "左前片" },
                { side: "right_front", sideName: "右前片" },
                { side: "left_back", sideName: "左后片" },
                { side: "right_back", sideName: "右后片" },
              ].filter(s => goodsSides.includes(s.side)).map((s, i) => {
                return (
                  <Option key={i} value={s.side}>{s.sideName}</Option>
                );
              })
            }
          </Select>
        </span>
      </div>

      <div className={styles.listItem} >
        <span className={styles.lable} >字体:</span>
        <Tooltip
          title={
            <div className={styles.fontFamily} >
              {
                fontManage.fontlist.map((fontC, i) => {
                  return (
                    <div
                      key={i}
                      onClick={() => {
                        editorStore.setNameFontFamily(fontC.id);
                      }}
                      className={clsx(styles.fontFamilyItem, (fontC.id === nameFontFamily) && styles.active)}
                    >
                      <img
                        alt=""
                        className={styles.img}
                        src={fontC.img}
                      />
                    </div>
                  );
                })
              }
            </div>
          }
          trigger={['click']}
          color={"#ffffff"}
          placement="bottom"
          onOpenChange={() => {
            editorStore.setActiveComponent(nameSide);
          }}
        >
          <div
            className={clsx(styles.input, !addName && styles.disabled)}
          >
            <img
              alt=""
              className={styles.fontImg}
              src={fontManage.getFontImg(nameFontFamily)}
            />
          </div>
        </Tooltip>


        <Tooltip
          title={
            <div className={styles.fontFamily} >
              {
                fontManage.fontlist.map((fontC, i) => {
                  return (
                    <div
                      key={i}
                      onClick={() => {
                        editorStore.setNumFontFamily(fontC.id);
                        // designEditor.setFontFontFamily(fontC.id);
                        // setFontFamily(fontC.id);
                      }}
                      className={clsx(styles.fontFamilyItem, (fontC.id === numFontFamily) && styles.active)}
                    >
                      <img
                        alt=""
                        className={styles.img}
                        src={fontC.img}
                      />
                    </div>
                  );
                })
              }
            </div>
          }
          trigger={['click']}
          color={"#ffffff"}
          placement="bottom"
          onOpenChange={() => {
            editorStore.setActiveComponent(numSide);
          }}
        >
          <div
            className={clsx(styles.input, !addNum && styles.disabled)}
          >
            <img
              alt=""
              className={styles.fontImg}
              src={fontManage.getFontImg(numFontFamily)}
            />
          </div>
        </Tooltip>

      </div>

      {/* 步骤2的颜色组件 */}
      <Step2Color
        addName={addName}
        addNum={addNum}
      />

      <button
        className={clsx(styles.next, (!addName && !addNum) && styles.disable)}
        onClick={() => {
          if (addName || addNum) {
            nameNumStore.setStep(3);
          }
        }}
      >
        下一步:输入名字号码
      </button>

      <ul className={styles.dec} >
        <li>“名字”和“00”是示例占位符。</li>
        <li>我们的艺术家将熟练地放置您列表中的每个姓名/号码。</li>
        <li>姓名/号码可以是印刷的或乙烯基的。</li>
      </ul>

    </div>
  );

}